<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="/res/third/bootstrap3/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="/res/common/js/jquery.1.9.1.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/res/third/easyUI/jquery.easyui.min.js"></script>
<script src="/res/third/artDialog/jquery.artDialog.js" type="text/javascript"></script>
<script src="/res/third/animate/wow.min.js" type="text/javascript"></script>


<style type="text/css">
.list-group{
	float: left;
	min-width:150px;
	min-height:300px;
}

.list-group-item{
	padding: 2px;
}
${"[#if mulitys?? ]"}
.groupdiv{
	display: none;
}

${"[/#if]"}

</style>
<script>
$(function(){

	$(".mulitygroup li").hover(function(){
		$(this).removeClass(x).removeClass("animated").addClass(x + ' animated').bind('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
	  	});
	},function(){
		$(this).removeClass(x).removeClass("animated");
	})

	$(".gocallback").click(function(){
		var name = $(this).attr("attname");
		var id = $(this).attr("attid");
		var topid = $(this).attr("atttop");

		chooseCallback(name,id,topid);
		return false;
	});


	$(".godelete").click(function(){
		//删除该条记录
		var attsecret = $(this).attr("attsecret");
		var id = $(this).attr("attid");
		$(this).parent().remove();
		art.dialog.post({
			url:"/repository/o_delete_secret.do",
			data:{secret:attsecret,categoryid:id},
			success:function(data){
				if(data.success){
					art.dialog.tips("删除成功");

				}else{
					art.dialog.tips("删除失败");
				}
			}
		});
		return false;
	})


	$(".groupdiv a").hover(function(){

		//当前attid
		var attid =$(this).attr("attid");


		var index = $(this).parent().attr("attindex");
		$("#step"+index).find(".active").removeClass("active");
		$(this).addClass("active");


		//下级所有先隐藏

		var next = parseInt(index);
		var i =1;
		while($("#step"+(next+i)).length>0){
			$("#step"+(next+i)).find("a").hide();;
			i++;
		}

	 	//子集显示
	 	$("#step"+(next+1)).find("._"+attid).show();
	})


	var x="pulse";
	$(".catetype3").hover(function(){
	 	$(this).removeClass(x).removeClass("animated").addClass(x + ' animated').bind('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
	  	});
	},function(){
		$(this).removeClass(x).removeClass("animated");
	});


	//点击选择
	$(".catetype3").on("click",function(){
		var name = $(this).text();
		var id = $(this).attr("attid");
		var atttop = $(this).attr("atttop");
        $(document).unbind("keyup");
		chooseCallback(name,id,atttop);
	})


	//选中默认的
	var current ="${"$"+"{current}"}";
	//如果是多个,就没有默认选中
	${"[#if  !mulitys?? ]"}
		addChecked(current);
	${"[/#if]"}


})

function addChecked(current){

	if(current!=""){
		var checked = $("a[attid="+current+"]");
		checked.addClass("active");
		var pcheckedid = checked.attr("attpid");
		$("._"+pcheckedid).show();
		addChecked(pcheckedid);

	}
}

function upatecategory(){
	art.dialog.post({
		url:"/category/o_update_category_temp.do",
		success:function(data){
			if(data.success){
				art.dialog.alert("更新成功!");
			}else{
				art.dialog.tips(data.msg);
			}
		}
	},"更新中")
	chooseCallback();

	return false;
}

function changeDiv(obj){
	if($(".mulitygroup").is(":visible")){
		$(".mulitygroup").hide();
		$(".groupdiv").show();
        $("#sosuo").show();
		$(obj).text("切换至:从现有匹配中选择");

	}else{
		$(".mulitygroup").show();
		$(".groupdiv").hide();
        $("#sosuo").hide();
		$(obj).text("切换至:重新选择");

	}
	return false;
}



function searchFor(){
    $(".active").removeClass("active");
    var searchVal = $("#searchval").val();
    var search = searchVal.trim().replace(/\s+/g,".*");
    var searchReg = ".*"+search+".*";
    var reg = new RegExp(searchReg);
    var attid ="";
    $("#step3").find("a").each(function () {
        var atext = $(this).text().trim();
        if(reg.test(atext)){
            attid = $(this).attr("attid");
            return false;
        };

    })

    if(attid==""){
        $("#step2").find("a").each(function () {
            var atext = $(this).text().trim();
            if(reg.test(atext)){
                attid = $(this).attr("attid");
                return false;
            };
        })
    }


    if(attid==""){
        $("#step1").find("a").each(function () {
            var atext = $(this).text().trim();
            if(reg.test(atext)){
                attid = $(this).attr("attid");
                return false;
            };
        })
    }

    addChecked(attid);

}


var pretime =new Date().getTime();
$(document).keyup(function(event){
    if(event.keyCode ==13){
        var nowtime = new Date().getTime();;
        if((nowtime-1000) > pretime){
            searchFor();
        }else{
            $(".catetype3.active").click();
        }
        pretime = nowtime;
    }
});
$("#searchval").focus();

</script>
</head>

<body>
[#--
	<div >
		<a href="#" onclick="return upatecategory()" >类目不对?点我更新</a>
	</div>
--]

${"[#if mulitys?? ]"}
	<div>
		<a href="#" onclick="return changeDiv(this)" class="btn btn-default" >切换至:重新选择</a>
	</div>
	<ul id="step0" class="list-group mulitygroup" attindex="0" >
		${"[#list mulitys as mulity ]"}
		<li  class="list-group-item list-group-item-success" >
			<a href="#"   class="list-group-item-success  gocallback" style="cursor: pointer;"  attname="${"$"+"{firstname[mulity_index]}"}"  atttop="${"$"+"{cagegorytops[mulity_index]}"}"  attid="${"$"+"{cagegoryids[mulity_index]}"}" >${"$"+"{mulity}"}</a>
			<a href="#"   class="list-group-item-info  godelete"    attsecret="${"$"+"{md5secret}"}"     attid="${"$"+"{cagegoryids[mulity_index]}"}"    style="float: right;margin-left: 5px;cursor: pointer;"    >删除</a>
		</li>
		${"[/#list]"}
	</ul>
${"[/#if]"}

[#if categorys?? && categorys?size!=0]
<div id="sosuo" ${"[#if mulitys?? ]"} style="display: none;"${"[/#if]"} >
<div class="input-group">
	<input type="text"  id="searchval" class="form-control" placeholder="类目名称"  >
	<span class="input-group-btn">
			<button class="btn btn-default" type="button" onclick="searchFor()"  >搜索</button>
		</span>
</div>

<p style="color: red;">
	*多个关键字检索以空格符分隔, Enter键搜索, 连续Enter键确定选中
	<br>
</p>

</div>

<div id="step1" class="list-group groupdiv" attindex="1" >
	[#list categorys as category ]
		[#if category.cateType==3]
			<a href="#" attid="${category.id}" attpid="" atttop="${category.id}"  style="cursor: pointer;"  class="list-group-item list-group-item-success catetype3">${category.name}</a>
		[#else]
			<a href="#" attid="${category.id}" attpid="" style="cursor: default;" class="list-group-item list-group-item-success">${category.name}</a>
		[/#if]
	[/#list]
	</div>


	<div id="step2" class="list-group groupdiv"  attindex="2">
		[#list categorys as category ]
			[#if category.childenCategorys?? && category.childenCategorys?size!=0 ]
				[#list category.childenCategorys as ccategory ]
					[#if ccategory.cateType==3]
					<a href="#"  style="display: none;cursor: pointer;"  atttop="${category.id}" attid="${ccategory.id}"  attpid="${category.id}" class="list-group-item list-group-item-info _${category.id} catetype3">${ccategory.name}</a>
					[#else]
					<a href="#"  style="display: none;cursor: default;"  attid="${ccategory.id}"  attpid="${category.id}" class="list-group-item list-group-item-info _${category.id}">${ccategory.name}</a>
					[/#if]
				[/#list]
			[/#if]
		[/#list]
	</div>



	<div id="step3" class="list-group groupdiv" attindex="3">
		[#list categorys as category ]
			[#if category.childenCategorys?? && category.childenCategorys?size!=0 ]
				[#list category.childenCategorys as ccategory ]
					[#if ccategory.childenCategorys?? && ccategory.childenCategorys?size!=0 ]
						[#list ccategory.childenCategorys as cccategory ]
							[#if cccategory.cateType==3]
								<a href="#" style="display: none;cursor: pointer;"  atttop="${category.id}"  attid="${cccategory.id}" attpid="${ccategory.id}" class="list-group-item list-group-item-danger _${ccategory.id} catetype3">${cccategory.name}</a>
							[#else]
								<a href="#" style="display: none;cursor: default;" attid="${cccategory.id}" attpid="${ccategory.id}" class="list-group-item list-group-item-danger _${ccategory.id}">${cccategory.name}</a>
							[/#if]
						[/#list]
					[/#if]
				[/#list]
			[/#if]
		[/#list]
	</div>


	<div id="step4" class="list-group groupdiv" attindex="4">
		[#list categorys as category ]
			[#if category.childenCategorys?? && category.childenCategorys?size!=0 ]
				[#list category.childenCategorys as ccategory ]
					[#if ccategory.childenCategorys?? && ccategory.childenCategorys?size!=0 ]
						[#list ccategory.childenCategorys as cccategory ]
							[#if cccategory.childenCategorys?? && cccategory.childenCategorys?size!=0 ]
								[#list cccategory.childenCategorys as ccccategory ]
								[#if cccategory.cateType==3]
									<a href="#"  style="display: none;cursor: pointer;"  atttop="${category.id}" attid="${ccccategory.id}"  attpid="${cccategory.id}" class="list-group-item list-group-item-danger _${cccategory.id} catetype3">${ccccategory.name}</a>
								[#else]
									<a href="#"  style="display: none;cursor: default;"  attid="${ccccategory.id}"  attpid="${cccategory.id}" class="list-group-item list-group-item-danger _${cccategory.id}">${ccccategory.name}</a>
								[/#if]
								[/#list]
							[/#if]
						[/#list]
					[/#if]
				[/#list]
			[/#if]
		[/#list]
	</div>


[/#if]



</body>
</html>